<template>
  <div>
    <!--块类统计-->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <h3 class="TextOverride">维修负责人</h3> 
          <div>
            <i class="el-icon-user" style="color: #faa755; margin-right: 6px; font-size: 20px" ></i>
            <span class="smallTextOverride" >{{people}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <h3 class="TextOverride">维修率</h3>
          <div>
            <i class="el-icon-setting" style="color: #faa755; margin-right: 6px;font-size: 20px"></i>
            <span class="smallTextOverride">{{maintenance}}%</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <h3 class="TextOverride">运营历史</h3>
          <div>
            <i class="el-icon-tickets" style="color: #faa755; margin-right: 6px;font-size: 20px"></i>
            <span class="smallTextOverride" >{{history}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <h3 class="TextOverride" >管道数量</h3>
          <div>
            <i class="el-icon-circle-plus-outline" style="color: #faa755; margin-right: 6px;font-size: 20px"></i>
            <span class="smallTextOverride" >{{pipeNumber}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--acharts统计图-->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card" shadow="hover">
          <echarts1 />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <echarts2 />
        </el-card>
        <el-card class="box-card"  shadow="hover">
          <echarts3 />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import echarts1 from './echarts1'
import echarts2 from './echarts2'
import echarts3 from './echarts3'
import { getListAPI } from '@/api/home'
 
export default {
  data() {
    return {
        pipeNumber: '',
        history: '',
        maintenance: '',
        people: '',
    }
  },
  name: 'home',
  components: {
    echarts1,
    echarts2,
    echarts3
  },
  created(){
    this.getList()
  },
  methods:{
    async getList(){
    const res = await getListAPI()
    this.pipeNumber = res.data.rows[0].pipeNumber
    this.people = res.data.rows[0].people
    this.maintenance = res.data.rows[0].maintenance
    this.history = res.data.rows[0].history
    }
  }
}
</script>
 
<style scoped>
.el-card{
  margin-bottom: 25px;
  text-align: center;
}
.TextOverride{
  color: #FFA07A ;
}
.smallTextOverride{
  color: #faa755 ;
  font-size: 16px
}
 
</style>